<template>
  <div class="shell" ref="rightList">
    <header class="header">
      <span @click="$router.push('/user')">
        <svg class="icon">
          <use xlink:href="#icon-renzhengyonghu"></use>
        </svg>
        创作中心
        <button class="level-btn">lv1</button>
      </span>
      <div class="sign-in">
        <span><svg class="icon"><use xlink:href="#icon-qiandao"></use></svg>
          签到
        </span>
      </div>
    </header>

    <div class="count">
      <el-row>
        <el-col :span="8">
          <el-statistic title="浏览量" :value="268500"/>
        </el-col>
        <el-col :span="8">
          <el-statistic title="赞同数" :value="268500"/>
        </el-col>
        <el-col :span="8">
          <el-statistic title="发布帖子" :value="268500"/>
        </el-col>
      </el-row>
    </div>

    <div class="user-options">
      <nav class="nav-group">
        <div class="nav-item">
          <div class="question circle">
            <svg class=" icon">
              <use xlink:href="#icon-wentijieda"></use>
            </svg>
          </div>
          <span>问题解答</span>
        </div>
        <div class="nav-item">
          <div class="edit circle">
            <svg class=" icon">
              <use xlink:href="#icon-bianjiwenzhang_huaban"></use>
            </svg>
          </div>
          <span>编辑文章</span>
        </div>
        <div class="nav-item">
          <div class="like circle">
            <svg class=" icon">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
          </div>
          <span>收藏列表</span>
        </div>
        <div class="nav-item">
          <div class="message circle">
            <el-badge :value="99">
              <svg class=" icon">
                <use xlink:href="#icon-pinglun"></use>
              </svg>
            </el-badge>
          </div>
          <span>消息列表</span>
        </div>
      </nav>


    </div>

    <div class="hot-article-list">
      <header class="hot-article-list-header">
        <svg class="icon">
          <use xlink:href="#icon-hot"></use>
        </svg>
        热帖推荐
      </header>

      <div class="hot-article-list-content">
        <ul>
          <li v-for="(item,index) in hotList" :key="index">
            <div class="hot-article-list-index">{{ index+1 }}</div>
            {{ item}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";


let hotList = ref(['a','b','c','d']);
</script>

<style lang="scss" scoped>
@import "@/styles/var";

.shell {
  font-size: 1rem;
  color: $color-black-text;
  margin: 10px;
  background-color: #ffffff;
  padding: 2rem;
  overflow: hidden;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  span {
    color: $color-black-text;
    cursor: pointer;

    svg {
      font-size: 1rem;
    }

    .level-btn {
      font-size: 1rem;
      color: $color-deep-theme;
      border: none;
      background-color: rgb(235, 244, 253);
      border-radius: 3px;

    }
  }
}

.count {
  background-color: rgb(249, 249, 250);
  padding: 1rem;
  margin: 1rem 0;
}

.user-options {
  width: 100%;

  .nav-group {
    display: flex;
    justify-content: space-between;

    .nav-item {
      display: flex;

      flex-direction: column;
      justify-content: center;
      align-items: center;

      .circle {
        height: 3rem;
        width: 3rem;
        text-align: center;
        line-height: 3rem;
        border-radius: 50%;
        cursor: pointer;
        margin-bottom: 10px;
      }

      svg {
        font-size: 2rem;
        transform: translateY(6px);
      }

      span {
        font-size: 0.8rem;
      }

      .circle.question {
        background-color: rgb(224, 236, 255);
        color: #409eff;
      }

      .circle.question:hover {
        background-color: rgb(178, 209, 255);
      }

      .circle.like {
        color: rgb(245, 204, 23);
        background-color: rgb(253, 248, 225);
      }

      .circle.like:hover {
        background-color: rgb(251, 238, 180);
      }

      .circle.edit {
        color: rgb(59, 197, 197);
        background-color: rgb(229, 247, 247);
      }

      .circle.edit:hover {
        background-color: rgb(189, 235, 235);
      }

      .circle.message {
        color: rgb(255, 150, 7);
        background-color: rgb(255, 242, 225);
      }

      .circle.message:hover {
        background-color: rgb(255, 223, 180);
      }

    }
  }
}

.hot-article-list {
  margin: 2rem 0;

  .hot-article-list-header {
    color: red;
    padding: 1rem 0;
    border-bottom: 1px solid rgb(235, 235, 235);
  }
  .hot-article-list-content{
    ul{
      li{
        color: $color-black-text;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgb(235, 235, 235);
        cursor: pointer;
        display: flex;
        align-items: center;
        .hot-article-list-index{
          text-align: center;
          border-radius: 50%;
          font-weight: bold;
          margin-right: 1rem;
        }
      }
      li:hover{
        background-color: rgb(247, 248, 250);
      }
      li:nth-child(1){
        color: rgb(247, 94, 94);
      }
      li:nth-child(2){
        color: rgb(255, 141, 77);
      }
      li:nth-child(3){
        color: rgb(253, 189, 64);
      }
    }
  }
}
</style>